import React from "react";
import { Menu, Dropdown, Button } from "antd";
import { useDispatch } from "react-redux";
import { MoreOutlined } from "@ant-design/icons";
import { Dispatch } from "@/store";

interface editMenu {
  node: any;
  isEdited?: boolean;
}
const EditMenu = (props: editMenu) => {
  const { node, isEdited = true } = props;
  const dispatch = useDispatch<Dispatch>();
  const remove = () => {
    dispatch.diagram.removeFlowNode(node);
  };
  const edit = () => {
    dispatch.diagram.openModal(node);
  };
  return (
    <Dropdown
      overlay={
        <Menu>
          {isEdited && (
            <Menu.Item key="1" onClick={edit}>
              编辑
            </Menu.Item>
          )}
          <Menu.Item key="2" onClick={remove}>
            删除
          </Menu.Item>
        </Menu>
      }
      trigger={["hover"]}
    >
      <Button type="text" size="small" icon={<MoreOutlined />} />
    </Dropdown>
  );
};
export default EditMenu;
